﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>
			cloneNode 模版尝试
		</title>
		<script type="text/javascript" src="../../base/javascript/ext-core-min.js">
</script>
		<link rel="stylesheet" type="text/css" href="../../base/css/core.css" />
	</head>
	<body>
		<form style="margin:100px;" action="#">
			<p>
			<input type="button" id="shadowCreater" value="创建阴影层"/>
		</p>
		</form>
		<div class="x-shadow" id="shadowTemplate" style="z-index: 10000; left: -9999px; top: -9999px; display:block;">
			<div class="xst">
				<div class="xstl"></div>
				<div class="xstc"></div>
				<div class="xstr"></div>
			</div>
			<div class="xsc">
				<div class="xsml"></div>
				<div class="xsmc"></div>
				<div class="xsmr"></div>
			</div>
			<div class="xsb">
				<div class="xsbl"></div>
				<div class="xsbc"></div>
				<div class="xsbr"></div>
			</div>
		</div><script type="text/javascript">
//<![CDATA[

		function createShadow(style){
			var s1=Ext.getDom("shadowTemplate").cloneNode(true);
			s1.id="s"+Ext.id();
			Ext.fly(s1).setStyle(style);
			var width=Ext.fly(s1).getComputedWidth()-12,
			height=Ext.fly(s1).getComputedHeight()-12;
			var h1=Ext.fly(s1).child(".xstc",true),
			h2=Ext.fly(s1).child(".xsbc",true),
				h4=Ext.fly(s1).child(".xsmc",true),
			h3=Ext.fly(s1).child(".xsc",true);
			h1.style.width=width+"px";
			h2.style.width=width+"px";
			h4.style.width=width+"px";
			h3.style.height=height+"px";
			return s1;
		}
		function randIt(l,u){   
			   return l+Math.floor(Math.random()*(u-l+1));   
		}

		Ext.onReady(function(){
			function sc(){
				var left=randIt(0,800);
				var top=randIt(0,600);
				var s1=createShadow({
					display:"block",
					left:left+"px",
					top:top+"px",
					width:"100px",
					height:"100px"
				});
				Ext.getBody().dom.appendChild(s1);
			}
			sc();
		Ext.get("shadowCreater").on("click",function(evt){
			sc();
			evt.stopEvent();
		});
		});
		//]]>
		</script>
	</body>
</html>
